<template>
  <div>
    <div><el-button @click="init">选择图片</el-button></div>
    <el-dialog title="选择图片"
               :close-on-click-modal="false"
               :visible.sync="visible"
               @closed="close"
               append-to-body
               width="40%">
      <div style="border-top: 1px #999999 solid"></div>
      <el-row>
        <el-col :span="4">
          <div class="left-menu-box">
            <div>
              <div :class="checkedIdx === 0 ? 'checked':'menu'" @click="change(0)">我的上传</div>
              <div :class="checkedIdx === 1 ? 'checked':'menu'" @click="change(1)">图片库</div>
            </div>
            <div>
              <el-upload ref="upload" :action='actionUrl' :file-list="fileList" :on-change="handleChange"
                         :show-file-list="false" :multiple="multiple" :limit="limit" :on-success="handleSuccess"
                         :auto-upload="false">
                <div slot="trigger" class="btn">本地资源</div>
                <div v-if="checkedIdx === 1" class="btn" style="background: #409EFF;color: #FFFFFF;cursor: pointer"
                     @click="confirm">确定
                </div>
                <div v-else class="btn" style="background: #409EFF;color: #FFFFFF;cursor: pointer"
                     @click="submitUpload">点击上传
                </div>
              </el-upload>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div>
            <div class="right-img-box" v-if="checkedIdx == 0">
              <div v-for="(item,index) in fileList" :key="index">
                <img :src="item.url" class="list-img">
                <div class="btn del" @click="deleteImg(index)">移除</div>
              </div>
            </div>
            <div v-else class="right-img-box">
              <div v-for="(item,index) in resourcesList" :key="index">
                <img :src="item.url" class="list-img" @click="checkedImg(index)" :class="item.checked?'img-select':''">
              </div>
            </div>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              layout="total, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    name: '',
    props: {
      actionUrl: String,
      multiple: {
        type: Boolean,
        default: false
      },
      limit: {
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        visible: false,
        checkedIdx: 0,
        action: this.$http.adornUrl('/sys/oss/upload?token=') + Vue.cookie.get('token'),
        fileList: [],
        resourcesList: [],
        page: {
          total: 0,
          currentPage: 1
        }
      }
    },
    methods: {
      init () {
        this.visible = true
        this.getImgResources()
      },

      // 选择图片库时，获取七牛已上传的图片资源
      getImgResources () {
        this.$http({
          url: this.$http.adornUrl(`/oss/oss/getOssImgList`),
          method: 'post',
          data: {
            page: this.page.currentPage,
            limit: 12
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.resourcesList = data.data.list
            this.page.total = data.data.totalCount
            this.page.currentPage = data.data.currPage
          }
        })
      },

      // 切换左侧菜单
      change (idx) {
        this.checkedIdx = idx
      },

      // 选择本地资源
      handleChange (file, fileList) {
        this.checkedIdx = 0
        this.fileList = fileList
        for (let i = 0; i < fileList.length; i++) {
          let url = URL.createObjectURL(fileList[i].raw)
          this.fileList[i].url = url
        }
      },

      // 选择图库图片
      checkedImg (index) {
        for (let i = 0; i < this.resourcesList.length; i++) {
          if (i === index) {
            Vue.set(this.resourcesList[index], 'checked', !this.resourcesList[index].checked)
          } else {
            Vue.set(this.resourcesList[i], 'checked', false)
          }
        }
      },

      // 删除选择的图片
      deleteImg (idx) {
        this.fileList.splice(idx, 1)
      },

      // 上传
      submitUpload () {
        // this.loading = this.$loading({
        //   lock: true,
        //   text: 'Loading',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(255, 255, 255, 0.7)'
        // })
        this.$refs.upload.submit()
      },

      handleSuccess (file, fileList) {
        this.fileList = fileList
        console.log(fileList)
        this.confirm()
      },

      confirm () {
        if (this.checkedIdx === 1) {
          for (let i = 0; i < this.resourcesList.length; i++) {
            if (this.resourcesList[i].checked) {
              this.fileList.push(this.resourcesList[i])
            }
          }
        }
        this.visible = false
        console.log(this.fileList)
        this.$emit('success', this.fileList)
      },

      // 分页
      handleCurrentChange (val) {
        this.page.currentPage = val
        this.getImgResources()
      },

      // 关闭弹窗
      close () {
        this.fileList = []
      }
    }
  }
</script>

<style scoped>
  .img-dialog{
    color: #00b7ee;
  }
  .left-menu-box {
    height: 400px;
    background: #ececec;
    color: #333333;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .menu {
    padding: 16px 20px;
    cursor: pointer;
  }

  .btn {
    text-align: center;
    padding: 16px 20px;
    width: 100%;
  }

  .checked {
    color: #333333;
    background: #FFFFFF;
    padding: 16px 20px;
    border-bottom: 1px #999999 solid;
  }

  .right-img-box {
    height: 360px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .list-img {
    width: 130px;
    height: 90px;
    margin: 10px;
    border: 2px solid #FFFFFF;
  }

  .img-select{
    border: 2px solid #409EFF;
  }
</style>
